<template>
  <div class=" w-full">

      <NavWap  class="xl:hidden" @showBigSlideMenu="showBigSlideMenu"  />
      <NavPc  class="hidden xl:block" @showBigSlideMenu="showBigSlideMenu"  />
      
      <!-- pc端才会出现左侧小菜单 -->
      <SlideMenuSmall class="hidden md:block"  v-if="slideTpye == 'small'"  />
       <!-- pc web端 拉出左侧菜单 -->
       <SlideMenuBig  v-if="slideTpye == 'big'" @showBigSlideMenu="showBigSlideMenu"/>
<!-- 用户常用Tag -->
     <div   :class="pl" class="fixed pt-1 left-0 top-16 bg-gray-600 w-full   text-gray-300 z-20 h-12 box-border">
      <div class=" w-auto  h-14 overflow-hidden  overflow-x-scroll scrollbar" style="white-space: nowrap;">
        <a  @click="getDocsAll" class="badge cursor-pointer  m-2  badge-lg" :class="selectTag=='All'?'badge-error':''"> All</a> 

       <a  v-for="(tag,key) in tags" v-bind:key="key" :class="selectTag==tag.name?'badge-error':''"  @click="getDocsTag(tag.name)" class="badge  m-2 badge-lg cursor-pointer"> {{tag.name}}</a> 
         
      </div>
    </div>
<!-- TagEnd -->
  <div :class="pl" class="2xl mx-auto   py-16  min-h-screen w-full"  >
    
    <div class="h-12"></div>
   <!-- topics -->
    <div class="p-10 text-center text-gray-200" v-if="showNoting">
              There are no topics with this tag.
    </div>
   <div  class="grid grid-cols-1 gap-4  m-4  sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
    <a  class="h-98 text-gray-300" v-for="(item,key) in topics"  v-bind:key="key"  :href="item.url" >
      
        <div  class="card bg-gray-700 topic-item   "  >
      <figure class="h-40" >
        <img  class="object-cover h-40 w-full" :src="item.cover" >
      </figure> 
      <div class="card-body p-2">
        <div class="card"><div class="flex-row items-center space-x-4 card-body p-0"><div>
            <a class="avatar" :href="'/uid/'+item.uid" v-if="item.picture"><div class="rounded-full w-10 h-10 shadow" ><img :src="item.picture"></div></a>
             <a class="avatar placeholder"  :href="'/uid/'+item.uid" v-else><div class="bg-neutral-focus text-neutral-content rounded-full w-10 h-10" :style="'background-color:'+ item['icon:bgColor']"><span>{{item['icon:text']}}</span></div></a> 
        </div> <div><h2 class=" text-gray-200 line-2" v-html="item.title"></h2> </div></div></div>
       <div class="truncate mt-2"  v-if="item.tags && item.tags.length>0">
            <a  class="btn btn-outline btn-xs text-gray-400 mx-1" v-for="(tag,key) in item.tags" v-bind:key="key"  :href="'/tags/'+tag">{{tag}}</a> 
        </div>
         <div class="p-2 text-gray-400"> 
            <span class="float-left">{{item.timestamp}}</span>
            <div class="float-right">
            <svg t="1641192519668" class="h-6 w-6 inline-block" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11421" width="200" height="200"><path d="M923.421 501.927c-31.19-83.254-86.289-154.373-159.107-205.71-74.638-52.55-162.384-80.464-254.013-80.464s-179.374 27.792-254.013 80.464c-72.94 51.458-127.917 122.576-159.107 205.71l-3.884 10.194 3.884 10.194c31.19 83.254 86.289 154.373 159.107 205.71 74.638 52.55 162.384 80.464 254.013 80.464s179.374-27.792 254.013-80.464c72.94-51.458 127.917-122.576 159.107-205.71l3.884-10.194-3.884-10.194z m-413.12 248.429c-155.102 0-296.126-95.269-354.623-238.114 58.375-142.965 199.521-238.114 354.623-238.114s296.126 95.269 354.623 238.114c-58.497 142.845-199.643 238.114-354.623 238.114z" p-id="11422" fill="#dbdbdb"></path><path d="M510.301 357.99c-84.955 0-154.131 69.177-154.131 154.131s69.177 154.131 154.131 154.131 154.131-69.177 154.131-154.131S595.255 357.99 510.301 357.99z m0 250.008c-52.914 0-95.877-42.962-95.877-95.877s42.962-95.877 95.877-95.877 95.877 42.962 95.877 95.877-43.084 95.877-95.877 95.877z" p-id="11423" fill="#dbdbdb"></path></svg>
            <span class="inline-block">{{item.viewcount}}</span>
            <svg t="1641192768302" class="h-4 w-4 inline-block ml-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12280" width="200" height="200"><path d="M511.913993 928.016126c-28.898371 0-57.968755-12.729044-86.695112-41.455401L106.30472 564.034268C68.117588 516.38636 31.994625 471.318663 31.994625 383.935495c0-141.223585 114.905426-255.956996 255.956996-255.956996 53.15236 0 104.068537 16.169326 147.244079 46.615824 14.449185 10.148833 17.889467 30.102469 7.740635 44.551655-10.148833 14.449185-30.102469 17.889467-44.551655 7.740635-32.338653-22.877877-70.525785-34.918864-110.433059-34.918864-105.960692 0-191.967747 86.179069-191.967747 191.967747 0 61.409037 20.297665 90.135394 59.172854 138.643373l315.645893 318.742147c15.997312 15.997312 28.898371 22.361834 41.283387 22.533848 12.729044 0.172014 24.942046-6.192508 41.455401-22.705863l316.677977-319.946246c25.974131-28.210314 57.968755-75.858223 57.968755-137.439274 0-105.960692-86.179069-191.967747-191.967747-191.967747-47.991937 0-94.091718 17.889467-129.526625 50.22812l-133.998992 134.171006c-12.55703 12.55703-32.682681 12.55703-45.239711 0s-12.55703-32.682681 0-45.239711l135.031077-135.203091c48.335965-44.207626 109.745003-67.945574 173.734252-67.945574 141.223585 0 255.956996 114.905426 255.956996 255.956996 0 82.394759-41.111372 144.319839-75.686209 181.646901L598.781119 886.388712C569.882748 915.287082 540.984378 928.016126 511.913993 928.016126z" p-id="12281" fill="#dbdbdb"></path></svg>
            <span class="inline-block">{{item.upvotes}}</span>
            </div>
            <div class="clear-both"></div>

         </div>
       </div>
    </div> 
    </a>
    
         
  </div>
   
  <!-- ... -->
</div>
</div>
</template>


<script>

export default {
  layout({req}){
    // //console.log("req.layout:",req.layout)
     return "web";
  },
  loading: true,
  name: 'IndexPage',
   data(){
    return { 
      page:2,
      slideTpye:'small',
      showNoting:false,
      user:{},
      pl:"pl-0 md:pl-20",
      topics:[],
      tags:[],
      selectTag:"All"
    }
  },
   async asyncData({params,$Data,error,req,route}) {
    //  //console.log("index:",params,"route:",route.path);
    
     let meta = await $Data.getMeta(route.path);
    //  //console.log("meta:",meta);
     let sses = await $Data.sesData(req.sid);
    
     let uid = (sses && sses.uid)?sses.uid:0;
     let tags = await $Data.getUserIndexTags(uid,20); 
      // //console.log("uid",uid,"tags:",tags)
    let p ={
       keywords:tags,
       type:"topic",
       page:1,
       size:20,
       cover:1,
    }
    // //console.log();
    let topicDocs = await $Data.getDocsWithScore(p); 
    //console.log("topicDocs",topicDocs)
    let topics =[];
    if(topicDocs.data && topicDocs.data.list){
      topics =  topicDocs.data.list;
    }
     let showNoting = false;
    if(topics.length==0){
      showNoting = true;
    }
    return { 
       topics:topicDocs.data.list,
       tags,
       meta,
       showNoting
     }
      
   },
    async fetch({ store, params }) {
      // //console.log("store.state.user:",store)
      // await store.dispatch('GET_USER')
   },
    head() {
    return {
      title: this.meta.title,
      meta: [
         {
          name: 'keywords',
          content: this.meta.keywords,
        },
        {
          name: 'description',
          content:this.meta.description
        }
      ],
      script: [
       
        {
          async: true,
          src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
          ssr: true,
          "data-ad-client":"ca-pub-4189412754863798"
        }
      ],

      }
    },
   mounted(){
     var _this = this;
     this.$tools.nextPage(()=>{
        _this.getDocsWithScore()
     });
   } ,
  methods: {
     async getDocsWithScore(reload=false){
       //this.$tools.showToast('Loading...', 10000)
       if( this.loading ==1 || this.lastpage==1){
         return;
       }
       this.loading =1;
       let post = {
         keywords:this.searchTags,
         page:this.page,
         cover:1,
         limit:20,
         type:"topic",
       }
       this.showNoting = false;
       let res = await  this.$axios.post("snogogo_nuxt/api/getDocsWithScore",post )
       this.loading = 0;
       if(res.code>0){
         
          this.$tools.alert("error",res.code+":"+res.msg)
          return;
       }
       this.page++;
       if(res.data.list.length==0){
         this.lastpage=1;
          return;
       }
       
       //this.$tools.hideToast();
       if(reload==1){
          this.topics = res.data.list;
       }else{
          this.topics = this.topics.concat(res.data.list);
       }
       if(this.topics.length==0){
          this.showNoting = true;
        }
      
     },
     async getDocsTag(tag){
        
        this.selectTag = tag;
        this.searchTags = [{
           name:tag,
           score:1,
        }];
        this.page=1;
        this.lastpage=0;
        this.topics=[];
        this.getDocsWithScore(1);
     },
     async getDocsAll(){
        this.searchTags = this.tags;
        this.selectTag ="All";
        this.page=1;
        this.getDocsWithScore(1);
     },
    // 左侧菜单显示
     showBigSlideMenu(){
        // //console.log("per:pl",this.pl,"slideTpye:",this.slideTpye)
        if(this.slideTpye=="small"){
          this.slideTpye="big";
          this.pl="pl-0 md:pl-60";
        }else{
          this.slideTpye="small";
          this.pl="pl-0 md:pl-20";
        }
     }
   }
   
 
     

}
</script>
